<template>
	<GlobalHeader
		:text="$t('pdwlzt.distributionNetworkStatus')"
		xh="CW6250C1360DF7"
		xlh="2522L000026
"
		:hour="null"></GlobalHeader>
	<div class="pdwlzt-page">
		<div class="wrap" ref="pdwlztBjRef">
			<div style="position: absolute; top: 0; left: 25%; color: #fff; font-size: 32px; z-index: 2">
				{{ isEmptyToCharacter(powerListDate[1]?.z329?.currentValue) }}KW
			</div>
			<div style="position: absolute; top: 0; right: 6%; color: #fff; font-size: 32px; z-index: 2">
				{{ isEmptyToCharacter(powerListDate[0]?.z313?.currentValue) }}V
			</div>
			<div
				class="pdwlzt-page-box"
				v-for="(item, index) in powInfo"
				:style="{ ...item.boxStyle }"
				:key="item">
				<div style="box-sizing: border-box">
					<div style="padding: 6px 0">{{ isEmptyToCharacter(renderValue(309, index)) }}KW</div>
					<div style="padding: 6px 0">{{ isEmptyToCharacter(renderValue(310, index)) }}V</div>
					<div style="padding: 6px 0">{{ isEmptyToCharacter(renderValue(311, index)) }}A</div>
					<div style="padding: 6px 0">{{ isEmptyToCharacter(renderValue(312, index)) }}HZ</div>
				</div>
				<HistogramPer
					:max="item.max"
					:value="RaphaelPercentage(309, index)"
					:custom-style="{ ...item.chartStyle }"></HistogramPer>
			</div>
			<div
				class="round"
				v-for="(item, index) in powInfo"
				:style="{ ...item.roundStyle }"
				:key="item">
				<div
					:class="['circle']"
					:style="{
						background: stateLight(renderValue(311, index))
					}"></div>
				<div
					:class="{
						circle_bottom: true,
						animation: LightAni(renderValue(311, index))
					}"
					:style="{
						background: stateLight(renderValue(311, index)),
						display: LightAni(renderValue(311, index)) ? 'block' : 'none'
					}"></div>
				<!-- 'animation' -->
				<div
					:class="{
						circle_bottom2: true,
						animation2: LightAni(renderValue(311, index))
					}"
					:style="{
						background: stateLight(renderValue(311, index)),
						display: LightAni(renderValue(311, index)) ? 'block' : 'none'
					}"></div>
				<!-- 'animation2' -->
			</div>
			<canvas ref="pdwlztRef"></canvas>
		</div>
	</div>
</template>

<script setup>
import GlobalHeader from './layout/GlobalHeader.vue'
import HistogramPer from '@/echarts/HistogramPer.vue'
import { straightLine, curveLine } from '@/mixins/globalRaphael.js'
import { color as colors } from '@/mixins/globalParam.js'
import { isEmptyToCharacter } from '@/plugins/index.js'
let allData = inject('allData')
let powerListDate = ref([])
let pdwlztRef = ref(null)
let pdwlztBjRef = ref(null)
let ctx = ref(null)
let off = [-395, -180, 30, 299]
let on = [-374, -160, 53, 321]
let powInfo = [
	{
		boxStyle: {
			top: '348px',
			left: '84px'
		},
		max: '350',
		chartStyle: {
			height: '260px',
			width: '100px'
		},
		roundStyle: {
			top: '307px',
			left: '140px'
		}
	},
	{
		boxStyle: {
			top: '348px',
			left: '302px'
		},
		max: '350',
		chartStyle: {
			height: '260px',
			width: '100px'
		},
		roundStyle: {
			top: '307px',
			left: '355px'
		}
	},
	{
		boxStyle: {
			top: '348px',
			left: '520px'
		},
		max: '350',
		chartStyle: {
			height: '260px',
			width: '100px'
		},
		roundStyle: {
			top: '307px',
			left: '567px'
		}
	},
	{
		boxStyle: {
			top: '348px',
			left: '787px'
		},
		max: '100',
		chartStyle: {
			height: '260px',
			width: '100px'
		},
		roundStyle: {
			top: '307px',
			left: '835px'
		}
	}
]
// 电流 > 10 开启
let stateLight = computed(() => {
	return (zjVal) => {
		if (zjVal >= 10) return colors[3] //
		return colors[0]
	}
})

let RaphaelPercentage = computed(() => {
	return (gl, index) => {
		let keys = 'z' + (gl + 16 * index)

		let value = powerListDate.value[index]?.[keys]?.currentValue || 0
		let maxgl = powerListDate.value[index]?.[keys]?.warningValue

		if (value) value = Math.ceil(100 * (value / maxgl))
		return value
	}
})

let LightAni = computed(() => {
	return (zjVal) => {
		if (zjVal >= 10) return true //
		return false
	}
})
watch(
	() => allData.value,
	(newVal, oldVal) => {
		let pdwlztBjRefs = pdwlztBjRef.value
		let targetWidth = pdwlztBjRefs.offsetWidth
		let targetHeight = pdwlztBjRefs.offsetHeight
		ctx.clearRect(0, 0, targetWidth, targetHeight)
		powerListDate.value[0] = newVal.power1
		powerListDate.value[1] = newVal.power2
		powerListDate.value[2] = newVal.power3
		powerListDate.value[3] = newVal.power_bak
		powerListDate.value.forEach((item, index) => {
			let key = 'z' + (311 + index * 16)
			let dlVal = item?.[key]?.currentValue || 0
			console.log('===', dlVal)
			if (dlVal > 10) {
				straightLine({ ctx, translateX: on[index] })
			}
			if (dlVal <= 10) {
				curveLine({ ctx, translateX: off[index] })
			}
		})
	},
	{
		deep: true
	}
)
onMounted(() => {
	let el = pdwlztRef.value
	ctx = el.getContext('2d')
	let pdwlztBjRefs = pdwlztBjRef.value
	let targetWidth = pdwlztBjRefs.offsetWidth
	let targetHeight = pdwlztBjRefs.offsetHeight
	el.width = targetWidth
	el.height = targetHeight
	// straightLine({ ctx })
	// straightLine({ ctx, translateX: 243.5 })
	// straightLine({ ctx, translateX: 486.5 })
	// straightLine({ ctx, translateX: 791.5 })
	curveLine({ ctx, translateX: off[0] })
	curveLine({ ctx, translateX: off[1] })
	curveLine({ ctx, translateX: off[2] })
	curveLine({ ctx, translateX: off[3] })
})

let renderValue = computed(() => {
	return (key, index) => {
		let keys = 'z' + (key + 16 * index)
		let value = powerListDate.value[index]?.[keys]?.currentValue || 0
		return value
	}
})
</script>

<style scoped lang="scss">
canvas {
	width: 1000px;
	height: 600px;
}
.wrap {
	height: 600px;
	width: 1000px;
	background: url('@/assets/image/pdwlzk.png') no-repeat center center;
	background-size: 100% 100%;
	position: relative;
}
.pdwlzt-page {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 85%;
}

.round {
	position: absolute;
	left: 515px;
	top: 364px;
	padding-top: 15px;
	padding-left: 10px;
}
.warning {
	background-color: rgb(214, 58, 58) !important;
}
.stoping {
	background: gray !important;
}
.running {
	background-color: green !important;
}
.round div {
	background: rgba(192, 192, 192, 1);
}
// rgb(214, 58, 58)
.circle {
	width: 57px;
	height: 45px;
	z-index: 999;
	text-align: center;
	top: 20px;
	left: 16px;
	position: absolute;
}
.circle_bottom {
	background: rgba(58, 150, 225, 0.4);
	width: 60px;
	height: 50px;
	filter: alpha(opacity=40);
	position: absolute;
	top: 19px;
	left: 15px;
	display: none;
}
.circle_bottom2 {
	background: rgba(58, 150, 225, 0.2);
	// border-radius:100%;
	width: 69px;
	height: 57px;
	filter: alpha(opacity=20);
	// z-index:-110;
	position: relative;
	display: none;
}
.animation {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animation2 {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@keyframes twinkling {
	0% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
	50% {
		opacity: 0.5;
		filter: alpha(opacity=50);
		-webkit-transform: scale(1.12);
	}
	100% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
}

// <div class="round">
//         <div class="circle"><a>消费进阶</a></div>
//         <div class="circle_bottom animation "></div>
//         <div class="circle_bottom2 animation2 "></div>
//     </div>

// 动画
.clPcolor {
	width: 50px;
	height: 50px;
	background-color: green;
	animation: clP 0.5s infinite;
}
.pdwlzt-page-box {
	display: flex;
	position: absolute;
	align-items: center;
	top: 407px;
	left: 438px;
	color: #fff;
}
.pdwlzt-page-box > div {
	padding: 6px 0;
}
@keyframes clP {
	from {
		opacity: 1;
	}
	to {
		// background-color: transparent;
		opacity: 0.1;
	}
}
</style>
